<!-- 导航栏组件
按钮（留心click貌似原生事件其实自定义重写了
loading框
弹框
表格（后期居然毕业了都不会复制 懵逼是正常的 能用不就香了 但是不会用  因此自己写
	https://www.layui.com/demo/table.html
	https://www.iviewui.com/components/table 
等等 -->
<link rel="stylesheet" href="./vantui.css">
<div id="root">
    <!-- 导航栏 -->
    <van-ban :title="data1" @leftclick="leftFn" @rightclick="rightFn"></van-ban>

    <!-- 按钮 -->
    <van-button :button='button1' @click.native="clickFn"></van-button>
    <van-button :button='button2'@click.native="clickFn1"></van-button>

    <!-- loading框 -->
    <van-loading :value="zhi"></van-loading>

    <!-- 弹框 -->
    <van-jump :value="tishi" :value1="tishi1" @click="dianjiFn"></van-jump>

    <!-- 表格 -->
    <van-table :value1="title" :value2="data2"></van-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vantui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        data1:{
            back:"返回",
            top:"列表",
            search:"搜索"
        },
        button1:{title:'修改',color:'red'},
        button2:{title:'确定',color:'green'},
        zhi:false,
        tishi:'点击有惊喜哦',
        tishi1:true,
        title:[{titles:'编号',key:'id'},
               {titles:"姓名",key:'name'},
               {titles:"年龄",key:'age'}],
        data2:[{id:1,name:"雷神",age:18},
               {id:2,name:"爱神",age:19},
               {id:3,name:"伟神",age:20},
               {id:4,name:"根哥",age:18}],
    },
methods:{
    leftFn(){
        console.log("执行返回");
    },
    rightFn(){
        console.log("执行搜索");
    },
    clickFn(){
        this.zhi=true
    },
    clickFn1(){
        this.zhi=false
    },
    dianjiFn(){
        alert("给自己一个赞")
    }
}
})
</script>